import React, { PureComponent } from 'react';
import { connect } from 'dva';
import {
  DownloadOutlined,
  DownOutlined,
  UpOutlined,
  QuestionCircleOutlined,
} from '@ant-design/icons';
import {
  Row,
  Col,
  Card,
  Input,
  Button,
  Form,
  Dropdown,
  Menu,
  Modal,
  message,
  Badge,
  Divider,
  Tabs,
  Tooltip,
  DatePicker,
  Select,
} from 'antd';
import queryString from 'query-string';
import router from 'umi/router';
import moment from 'moment';
import StandardTable from '@/components/StandardTable';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import ProTable from '@/pages/components/Problem/ProblemPage/ProTable';
import ProExportBtn from '@/pages/components/Problem/ProblemPage/ProExportBtn';
import Authorized from '@/utils/Authorized';
import { checkPermissions } from '@/utils/authority';
import styles from '@/utils/utils.less';
import downloadFile, { getProPagination, toLoceUpCase } from '@/utils/utils';
import HOCSelect from '@/components/AntDesign/Select';
import proIcon from '../../../assets/proIcon.png';
import TextOverFlow from '../../components/TextOverFlow';
import Quotation from '../../components/Quotation';
import Contract from '../../components/Contract';
import Customer from '../../components/CustomerWithState';
import Supplier from '../../components/Supplier';

const FormItem = Form.Item;
const { TabPane } = Tabs;
const { RangePicker } = DatePicker;
const { Option } = Select;

@connect(({ publicdata, adjusttask, loading }) => ({
  dictCode: publicdata.dictCode,
  data: adjusttask.data,
  loading: loading.models.adjusttask,
  tabList: adjusttask.tabList,
  activeKey: adjusttask.activeKey,
  formFieldsValue: adjusttask.formFieldsValue,
  valuesArr: adjusttask.valuesArr,
  expandForm: adjusttask.expandForm,
  respUserList: adjusttask.respUserList,
  downloadParams: adjusttask.downloadParams,
}))
class AdjustTaskTableList extends PureComponent {
  formRef = React.createRef();

  proTable;

  constructor(props) {
    super(props);
    this.state = {
      selectedRows: [],
      selectedRowKeys: [],
      orderBy: null,
    };

    this.tableSearchLayout = {
      labelCol: { md: { span: 7 } },
      wrapperCol: { md: { span: 17 } },
    };
  }

  componentDidMount() {
    const {
      data: { pagination },
      location,
      activeKey,
      dispatch,
      formFieldsValue,
    } = this.props;
    const tempActiveKey = queryString.parse(location.search).activeKey || activeKey;
    // 获取所属客服列表数据
    dispatch({
      type: 'adjusttask/fetchRespUserList',
      payload: {},
    });
    if (location.queryParam) {
      dispatch({
        type: 'adjusttask/updateModelData',
        payload: { formFieldsValue: location.queryParam, expandForm: true },
      });
    }
    dispatch({
      type: 'adjusttask/updateModelData',
      payload: {
        activeKey: tempActiveKey,
      },
    });
    dispatch({
      type: 'batchquo/updateModelData',
      payload: {
        isGoBack: false,
      },
    });
    const proPagination = getProPagination(tempActiveKey, '4', pagination);
    this.searchList(
      this.processFormData(formFieldsValue),
      tempActiveKey,
      proPagination.current,
      proPagination.pageSize
    );
  }

  // 处理form数据
  processFormData = fieldsValue => {
    const formFieldsValue = {};
    const tempFieldsValue = fieldsValue;
    Object.keys(tempFieldsValue).forEach(key => {
      if (key === 'empName' || key === 'idCode') {
        tempFieldsValue[key] = (fieldsValue[key] && fieldsValue[key].trim()) || null;
      }
      if (key === 'operTime') {
        formFieldsValue.operTimeStart =
          (tempFieldsValue.operTime &&
            tempFieldsValue.operTime[0] &&
            tempFieldsValue.operTime[0].format('YYYY-MM-DD')) ||
          null;
        formFieldsValue.operTimeEnd =
          (tempFieldsValue.operTime &&
            tempFieldsValue.operTime[1] &&
            tempFieldsValue.operTime[1].format('YYYY-MM-DD')) ||
          null;
      }
      formFieldsValue[key] = tempFieldsValue[key] === undefined ? null : tempFieldsValue[key];
      delete formFieldsValue.operTime;
    });
    return formFieldsValue;
  };

  // 获取列表数据
  searchList = async (
    formFieldsValue,
    activeKey = '1',
    currentPage = 1,
    pageSize = 10,
    queryParam,
    isClear = true
  ) => {
    if (isClear) {
      await this.setState({ selectedRows: [], selectedRowKeys: [] });
    }
    const { dispatch } = this.props;
    await dispatch({
      type: 'adjusttask/updateTabListQuery',
      payload: { activeKey },
    });
    if (queryParam) {
      await dispatch({
        type: 'adjusttask/updateTabListQuery',
        payload: { formFieldsValue: queryParam, expandForm: true },
      });
    }
    const {orderBy} = this.state
    const pageArg = { currentPage, pageSize, orderBy};
    const values = {
      adjStatus: activeKey,
      ...formFieldsValue,
      pageArg,
    };

    // 导出的参数
    const downloadParams = {
      adjStatus: activeKey,
      ...formFieldsValue,
      busiType: 22,
    };
    await dispatch({
      type: 'adjusttask/updateModelData',
      payload: {
        downloadParams,
      },
    });

    if (Number(activeKey) === 4) {
      const proFormFieldsValue = { ...downloadParams };
      this?.proTable?.searchList?.(proFormFieldsValue, currentPage, pageSize);
    } else {
      dispatch({
        type: 'adjusttask/fetchList',
        payload: values,
      });
    }
  };

  // 查询指定页签的列表
  searchTabList = async (queryActiveKey, currentPage = 1, pageSize = 10) => {
    let activeKey = queryActiveKey;
    try {
      const { dispatch, tabList, valuesArr } = this.props;
      const fieldsValue = await this.formRef.current.validateFields(valuesArr);
      let formFieldsValue = this.processFormData(fieldsValue);
      const checkHasValue = Object.keys(fieldsValue).some(
        key => Boolean(fieldsValue[key]) !== false
      );
      if (activeKey === '4') {
        formFieldsValue = {
          ...formFieldsValue,
          busiType: '22',
        };
        const downloadParams = {
          taskStatus: activeKey,
          ...formFieldsValue,
          busiType: 22,
        };
        await dispatch({
          type: 'adjusttask/updateModelData',
          payload: {
            downloadParams,
          },
        });
        const proFormFieldsValue = { ...downloadParams };
        this?.proTable?.searchList?.(proFormFieldsValue, currentPage, pageSize);
      }
      if (!checkHasValue) {
        this.searchList(formFieldsValue, activeKey);
        const newTabList = tabList.map(item => ({ ...item, isHasBadge: false }));
        await dispatch({
          type: 'adjusttask/updateModelData',
          payload: { tabList: newTabList },
        });
      } else {
        const fetchTabNumPayload = { formFieldsValue, currentPage, pageSize, adjStatus: activeKey };
        const response = await dispatch({
          type: 'adjusttask/fetchTabNum',
          payload: { ...fetchTabNumPayload },
        });
        if (response.success) {
          if (response?.data?.length) {
            activeKey = await dispatch({
              type: 'adjusttask/setFetchTabNumActiveKey',
              payload: {
                data: response.data,
              },
            });

            await dispatch({
              type: 'adjusttask/setFetchTabNumFormFieldsValue',
              payload: {
                ...fetchTabNumPayload,
              },
            });
          } else {
            // 没有结果回复列表参数
            await dispatch({
              type: 'adjusttask/setFetchTabNumNoResult',
            });
          }
        }
      }
      await dispatch({
        type: 'adjusttask/updateTabListQuery',
        payload: { formFieldsValue: fieldsValue, activeKey },
      });
    } catch (e) {
      console.error(e);
    }
  };

  // 切换表格展开收起
  toggleForm = () => {
    const { dispatch, expandForm } = this.props;
    dispatch({
      type: 'adjusttask/updateModelData',
      payload: { expandForm: !expandForm },
    });
  };

  handleRef = proTable => {
    this.proTable = proTable;
  };

  // 点击复选框
  handleSelectRows = (selectedRows, selectedRowKeys) => {
    this.setState({ selectedRows, selectedRowKeys });
  };

  // 表格有变化：比如：切换页码
  handleStandardTableChange = (pagination, filters, sorter) => {
    const { activeKey, formFieldsValue } = this.props;
    this.setState(state=> {
      state.orderBy =  sorter.order ? toLoceUpCase(sorter.field, sorter.order) : null
      this.searchList(
        this.processFormData(formFieldsValue),
        activeKey,
        pagination.current,
        pagination.pageSize,
        undefined,
        false
      );
    })
  };

  // 重置
  resetSearch = async () => {
    const { dispatch } = this.props;
    await dispatch({
      type: 'adjusttask/updateModelData',
      payload: { formFieldsValue: {} },
    });
    this.formRef.current.resetFields();
    this.formRef.current.setFieldsValue({ operTime: null });
  };

  // 切换页签
  changeTabPane = activeKey => {
    const { location, formFieldsValue, dispatch } = this.props;
    router.push({
      pathname: location.pathname,
      query: {
        activeKey,
      },
    });
    dispatch({
      type: 'adjusttask/updateTabListQuery',
      payload: { activeKey },
    });
    this.searchList(this.processFormData(formFieldsValue), activeKey);
  };

  // 取消调整
  cancelAdjust = () => {
    const { selectedRowKeys } = this.state;
    const {
      dispatch,
      activeKey,
      formFieldsValue,
      data: { pagination },
    } = this.props;
    if (selectedRowKeys.length === 1) {
      Modal.confirm({
        icon: <QuestionCircleOutlined />,
        title: `你确定要取消调整吗？`,
        okText: '确认',
        cancelText: '取消',
        onOk: () => {
          dispatch({
            type: 'adjusttask/cancelAdjust',
            payload: { adjId: selectedRowKeys[0] },
            callback: response => {
              if (response.success) {
                this.setState({ selectedRowKeys: [], selectedRows: [] }, () => {
                  this.searchList(
                    this.processFormData(formFieldsValue),
                    activeKey,
                    pagination.current,
                    pagination.pageSize
                  );
                });
                message.success('取消成功！');
              } else {
                message.warning(`${response.message || '取消失败！'}`);
              }
            },
          });
        },
      });
    } else {
      message.warning('请只选择一条数据！');
    }
  };

  // 问题人员导出数据
  export = () => {
    const { selectedRowKeys } = this.state;
    if (!selectedRowKeys.length) {
      Modal.confirm({
        icon: <QuestionCircleOutlined />,
        title: '温馨提示',
        content: '如果不选择列表数据，则默认导出当前条件下所有数据',
        okText: '导出',
        cancelText: '取消',
        onOk: () => {
          this.exportExcel();
        },
      });
    } else {
      this.exportExcel();
    }
  };

  // 导出excel
  exportExcel = () => {
    const { selectedRowKeys } = this.state;
    const { formFieldsValue, activeKey } = this.props;
    const params = {
      ...this.processFormData(formFieldsValue),
    };
    if (activeKey === '4') {
      // 问题人员导出
      downloadFile(
        { ...params, busiType: '3', probDetIds: selectedRowKeys },
        '/csApi/sendProb/export',
        'POST'
      );
    } else {
      downloadFile(
        {
          ...params,
          adjStatus: activeKey,
          adjIdList: selectedRowKeys,
        },
        '/csApi/empSendAdjService/export',
        'POST'
      );
    }
  };

  // 修改
  update = record => {
    const { adjType, adjId, custId, sendId } = record;
    switch (adjType) {
      case 1:
        router.push(
          `/customservicemanage/adjusttask/insupdate?adjId=${adjId}&custId=${custId}&sendId=${sendId}`
        );
        break;
      case 2:
        router.push(
          `/customservicemanage/adjusttask/accuupdate?adjId=${adjId}&custId=${custId}&sendId=${sendId}`
        );
        break;
      default:
        message.warning('努力开发中。。。');
        break;
    }
  };

  renderSimpleForm() {
    const { formFieldsValue, activeKey } = this.props;
    return (
      <Form ref={this.formRef} layout="inline" initialValues={formFieldsValue}>
        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
          <Col md={8} sm={24}>
            <FormItem {...this.tableSearchLayout} label="姓名" name="empName">
              <Input placeholder="请输入" />
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem {...this.tableSearchLayout} label="证件号" name="idCode">
              <Input placeholder="请输入" />
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <span className={styles.submitButtons}>
              <Button
                type="primary"
                htmlType="submit"
                onClick={() => this.searchTabList(activeKey)}
              >
                查询
              </Button>
              <Button style={{ marginLeft: 8 }} onClick={this.resetSearch}>
                重置
              </Button>
              <a style={{ marginLeft: 8 }} onClick={this.toggleForm}>
                展开 <DownOutlined />
              </a>
            </span>
          </Col>
        </Row>
      </Form>
    );
  }

  renderAdvancedForm() {
    const { formFieldsValue, activeKey, respUserList } = this.props;
    return (
      <Form ref={this.formRef} layout="inline" initialValues={formFieldsValue}>
        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
          <Col md={8} sm={24}>
            <FormItem {...this.tableSearchLayout} label="姓名" name="empName">
              <Input placeholder="请输入" />
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem {...this.tableSearchLayout} label="证件号" name="idCode">
              <Input placeholder="请输入" />
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem {...this.tableSearchLayout} label="客户名称" name="custId">
              <Customer allowClear />
            </FormItem>
          </Col>
        </Row>
        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
          <Col md={8} sm={24}>
            <FormItem {...this.tableSearchLayout} label="合同名称" name="custContId">
              <Contract params={{ contType: 3 }} allowClear />
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem {...this.tableSearchLayout} label="签约方" name="sendCorp">
              <Supplier params={{ status: 2 }} allowClear />
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem {...this.tableSearchLayout} label="报价单" name="quoId">
              <Quotation allowClear />
            </FormItem>
          </Col>
        </Row>
        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
          <Col md={8} sm={24}>
            <FormItem {...this.tableSearchLayout} label="操作时间" name="operTime">
              <RangePicker
                placeholder={['开始日期', '结束日期']}
                style={{ width: '100%' }}
                format="YYYY-MM-DD"
              />
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem label="所属客服" {...this.tableSearchLayout} name="primId">
              <HOCSelect
                placeholder="请输入关键字检索"
                style={{ width: '100%' }}
                showSearch
                optionFilterProp="children"
                allowClear
              >
                {respUserList.map(item => (
                  <Option key={item.userId} title={item.userName}>
                    {item.userName}
                  </Option>
                ))}
              </HOCSelect>
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <div style={{ overflow: 'hidden' }}>
              <div style={{ float: 'right', marginBottom: 24 }}>
                <Button
                  type="primary"
                  htmlType="submit"
                  onClick={() => this.searchTabList(activeKey)}
                >
                  查询
                </Button>
                <Button style={{ marginLeft: 8 }} onClick={this.resetSearch}>
                  重置
                </Button>
                <a style={{ marginLeft: 8 }} onClick={this.toggleForm}>
                  收起
                  <UpOutlined />
                </a>
              </div>
            </div>
          </Col>
        </Row>
      </Form>
    );
  }

  renderForm() {
    const { expandForm } = this.props;
    return expandForm ? this.renderAdvancedForm() : this.renderSimpleForm();
  }

  render() {
    const { data, loading, tabList, activeKey, dispatch, downloadParams } = this.props;
    const { selectedRows, selectedRowKeys } = this.state;
    const moreMenu = (
      <Menu>
        {checkPermissions('cs:adj:export') && (
          <Menu.Item key="update" onClick={this.export}>
            导出
          </Menu.Item>
        )}
        {checkPermissions('cs:adj:cancel') && (
          <Menu.Item key="cancel" onClick={this.cancelAdjust}>
            取消
          </Menu.Item>
        )}
      </Menu>
    );
    const columns = [
      {
        title: '姓名',
        dataIndex: 'empName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: (text, record) =>
          record.probFlag === 1 ? (
            <Tooltip
              placement="top"
              title={
                <div>
                  <p>
                    问题人员类型：
                    {record.probDets && record.probDets[0] ? record.probDets[0].probTypeName : '--'}
                  </p>
                  <p>
                    问题说明：
                    {record.probDets && record.probDets[0] ? record.probDets[0].probTypeDesc : '--'}
                  </p>
                </div>
              }
            >
              <span>
                {text}
                <img src={proIcon} alt="问题人员" />
              </span>
            </Tooltip>
          ) : (
            <span>{text}</span>
          ),
      },
      {
        title: '证件号',
        dataIndex: 'idCode',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      // {
      //   title: '签约方',
      //   dataIndex: 'suppName',
      //   onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      // },
      {
        title: '客户名称',
        dataIndex: 'custName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: text => <TextOverFlow text={text} />,
      },
      {
        title: '业务开始日期',
        dataIndex: 'beginDate',
        sorter: (a, b) => new Date(b.beginDate) - new Date(a.beginDate),
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: val => moment(val).format('YYYY-MM-01') || '无',
      },
      {
        title: '执行地区',
        dataIndex: 'cityName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: val => val || '--',
      },
      {
        title: '服务类型',
        dataIndex: 'sendTypeName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        align: 'center',
      },
      {
        title: '调整类型',
        dataIndex: 'adjTypeName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '所属客服',
        dataIndex: 'primName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: val => (val && val) || '--',
      },
      {
        title: '操作时间',
        dataIndex: 'operTime',
        sorter: true,
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: val => (val ? moment(val).format('YYYY-MM-DD HH:mm') : '无'),
      },
      {
        title: '操作',
        dataIndex: 'operation',
        onHeaderCell: () => ({ style: { fontWeight: 'bold', width: 150, textAlign: 'center' } }),
        onCell: () => ({ style: { textAlign: 'center' } }),
        render: (_text, record) => (
          <div>
            {record.adjType === 1 || record.adjType === 2 ? (
              <span>
                <a
                  onClick={() =>
                    router.push(
                      `/customservicemanage/adjusttask/detail?adjTaskId=${record.adjId}&adjType=${
                        record.adjType
                      }`
                    )
                  }
                >
                  查看
                </a>
                <Authorized authority="cs:adj:update" noMatch={null}>
                  <Divider type="vertical" />
                </Authorized>
                <Authorized authority="cs:adj:update" noMatch={null}>
                  <a onClick={() => this.update(record)}>修改</a>
                </Authorized>
              </span>
            ) : (
              <span>
                <a
                  onClick={() =>
                    router.push(
                      `/customservicemanage/adjusttask/${
                        record.adjType === 3 ? 'persondetail' : 'detail'
                      }?adjTaskId=${record.adjId}&adjType=${record.adjType}`
                    )
                  }
                >
                  查看
                </a>
              </span>
            )}
          </div>
        ),
      },
    ];
    const columnsFinished = [
      {
        title: '姓名',
        dataIndex: 'empName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: (text, record) =>
          record.probFlag === 1 ? (
            <Tooltip
              placement="top"
              title={
                <div>
                  <p>
                    问题人员类型：
                    {record.probDets && record.probDets[0] ? record.probDets[0].probTypeName : '--'}
                  </p>
                  <p>
                    问题说明：
                    {record.probDets && record.probDets[0] ? record.probDets[0].probTypeDesc : '--'}
                  </p>
                </div>
              }
            >
              <span>
                {text}
                <img src={proIcon} alt="问题人员" />
              </span>
            </Tooltip>
          ) : (
            <span>{text}</span>
          ),
      },
      {
        title: '证件号',
        dataIndex: 'idCode',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '客户名称',
        dataIndex: 'custName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: text => <TextOverFlow text={text} />,
      },
      {
        title: '业务开始日期',
        dataIndex: 'beginDate',
        sorter: (a, b) => new Date(b.beginDate) - new Date(a.beginDate),
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: val => moment(val).format('YYYY-MM-01') || '无',
      },
      {
        title: '执行地区',
        dataIndex: 'cityName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: val => val || '--',
      },
      {
        title: '服务类型',
        dataIndex: 'sendTypeName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        align: 'center',
      },
      {
        title: '调整类型',
        dataIndex: 'adjTypeName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '所属客服',
        dataIndex: 'primName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: val => (val && val) || '--',
      },
      {
        title: '操作时间',
        dataIndex: 'operTime',
        sorter: (a, b) => new Date(b.operTime) - new Date(a.operTime),
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: val => (val ? moment(val).format('YYYY-MM-DD HH:mm') : '无'),
      },
      {
        title: '操作',
        dataIndex: 'operation',
        onHeaderCell: () => ({ style: { fontWeight: 'bold', width: 150, textAlign: 'center' } }),
        onCell: () => ({ style: { textAlign: 'center' } }),
        render: (_text, record) => (
          <a
            onClick={() =>
              router.push(
                `/customservicemanage/adjusttask/${
                  record.adjType === 3 ? 'persondetail' : 'detail'
                }?adjTaskId=${record.adjId}&adjType=${record.adjType}`
              )
            }
          >
            查看
          </a>
        ),
      },
    ];
    const processing = (
      <div>
        <Row style={{ marginBottom: 16 }}>
          <Authorized authority="cs:adj:adj" noMatch={null}>
            <Button
              type="primary"
              onClick={() => {
                dispatch({
                  type: 'adjusttask/updateModelData',
                  payload: { isClear: true },
                });
                router.push('/customservicemanage/adjusttask/adjust');
              }}
              style={{ marginRight: 8 }}
            >
              调整
            </Button>
          </Authorized>
          <Authorized authority="cs:adj:batch" noMatch={null}>
            <Button
              onClick={() => router.push('/customservicemanage/adjusttask/batch')}
              style={{ marginRight: 8 }}
            >
              批量调整
            </Button>
          </Authorized>
          {checkPermissions('cs:adj:export' || 'cs:adj:cancel') && (
            <Dropdown overlay={moreMenu}>
              <Button>
                更多
                <DownOutlined />
              </Button>
            </Dropdown>
          )}
        </Row>
        <StandardTable
          selectedRows={selectedRows}
          selectedRowKeys={selectedRowKeys}
          loading={loading}
          data={data}
          rowKey="adjId"
          columns={columns}
          onSelectRow={this.handleSelectRows}
          onChange={this.handleStandardTableChange}
        />
      </div>
    );
    const finished = (
      <div>
        <Row style={{ marginBottom: '16px' }}>
          <Authorized authority="cs:empSendCreateService:updateSendInfo" noMatch={null}>
            <Button
              style={{ marginRight: 8 }}
              icon={<DownloadOutlined />}
              type="primary"
              onClick={this.export}
            >
              导出
            </Button>
          </Authorized>
        </Row>
        <StandardTable
          selectedRows={selectedRows}
          selectedRowKeys={selectedRowKeys}
          loading={loading}
          data={data}
          rowKey="adjId"
          columns={columnsFinished}
          onSelectRow={this.handleSelectRows}
          onChange={this.handleStandardTableChange}
        />
      </div>
    );
    const problem = (
      <div>
        <Row style={{ marginBottom: '16px' }}>
          <Authorized authority="cs:ordAdjProb:addProbFdbk" noMatch={null}>
            <Button
              type="primary"
              onClick={() =>
                router.push('/customservicemanage/adjusttask/batchfeedback?busiType=22')
              }
              style={{ marginRight: 8 }}
            >
              批量反馈
            </Button>
          </Authorized>
          <ProExportBtn selectedRowKeys={selectedRowKeys} downloadParams={downloadParams} />
        </Row>
        <ProTable
          onRef={this.handleRef}
          selectedRows={selectedRows}
          selectedRowKeys={selectedRowKeys}
          onSelectRow={this.handleSelectRows}
          proUrl="/customservicemanage/adjusttask/problem"
          busiType="22"
        />
      </div>
    );
    // 获取页签组件
    const getTabPane = key => {
      switch (key) {
        case '1':
          return processing;
        case '2':
          return finished;
        case '4':
          return problem;
        default:
          return <div />;
      }
    };
    return (
      <PageHeaderWrapper>
        <Card className={styles.searchCard}>
          <div className={styles.tableListForm}>{this.renderForm()}</div>
        </Card>
        <Card className={styles.tabCard}>
          <div className={styles.tableList}>
            <Tabs activeKey={activeKey} onChange={this.changeTabPane}>
              {tabList.map(pane => (
                <TabPane
                  tab={<Badge dot={pane.isHasBadge}>{pane.itemName}</Badge>}
                  key={pane.itemCode}
                  forceRender
                >
                  {getTabPane(pane.itemCode)}
                </TabPane>
              ))}
            </Tabs>
          </div>
        </Card>
      </PageHeaderWrapper>
    );
  }
}

export default AdjustTaskTableList;
